import React, { Component } from 'react'
import { Clipboard, StyleSheet, Text, View } from 'react-native'
import { NavigationActions, withNavigation } from 'react-navigation'
import { List, WhiteSpace, WingBlank } from 'antd-mobile'
import { inject, observer } from 'mobx-react/native'
import { withApollo } from 'react-apollo'
import { Icon, ProfileCard } from '../components'
import * as data from '../mock-data'

const Item = withNavigation(({ icon, name, navigation }) => (
  <List.Item
    arrow="horizontal"
    thumb={<Icon name={icon} />}
    onClick={() => navigation.navigate(name)}
  >
    <WingBlank size="lg">
      <Text>{name}</Text>
    </WingBlank>
  </List.Item>
))

@inject('actions', 'store')
@observer
@withApollo
export class ControlScreen extends Component {
  render = () => (
    <View style={styles.container}>
      <ProfileCard profile={this.props.store.profile} />
      <WhiteSpace />
      {/*
      <List>
        <List.Item
          onClick={() => Clipboard.setString(this.props.store.user.id)}
        >
          <Text style={{ textAlign: 'center' }}>
            ID: {this.props.store.user.id}
          </Text>
          <Text
            style={{
              color: 'silver',
              fontSize: 12,
              marginTop: 2,
              textAlign: 'center',
            }}
          >
            (Click to copy to clipboard)
          </Text>
        </List.Item>
      </List>
      <WhiteSpace />
      */}
      <List>
        <Item name="Settings" icon="settings" />
        <Item name="About" icon="information-circle" />
      </List>
      <WhiteSpace />
      <List>
        <List.Item
          onClick={() => {
            this.props.actions.logout()
            this.props.client.resetStore()
            this.props.navigation.dispatch(
              NavigationActions.reset({
                key: Object.prototype.__proto__,
                index: 0,
                actions: [NavigationActions.navigate({ routeName: 'Login' })],
              }),
            )
          }}
        >
          <Text style={styles.logout}>Logout</Text>
        </List.Item>
      </List>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  logout: {
    color: 'red',
    textAlign: 'center',
  },
})
